<template>
  <div>
    <swiper
      :options="swiperOption"
      class="detail-swiper"
      v-if="topImages.length"
    >
      <swiperSlide v-for="item in topImages" :key="item" class="swiper-slide">
        <img :src="item" alt="" @click="imgClick(item)" />
      </swiperSlide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import "swiper/swiper-bundle.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "detailSwiper",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 20,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  props: {
    topImages: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    imgClick(src) {
      this.$parent.imgClick(src);
    },
  },
};
</script>

<style scoped>
.detail-swiper {
  width: 100%;
  height: 360px;
  display: flex;
}
.swiper-slide {
  width: 80%;
  text-align: center;
}
.swiper-slide img {
  width: 100%;
}
.swiper-container {
  --swiper-pagination-color: var(--color-tint); /* 两种都可以 */
}
.big-img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(1, 1, 1, 1);
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999;
}
</style>
